

<script>

import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import request from '@/utils/request'
import ExtTable from '@/components/lt/codeGenerator/components/ExtTable'
import ExtDrawer from './ExtDrawer'
import ExtModal from './ExtModal'
import ExtRow from '@/components/lt/codeGenerator/components/ExtRow'
import ExtTree from '@/components/lt/codeGenerator/components/ExtTree'
import ExtQueryForm from '@/components/lt/codeGenerator/components/ExtQueryForm'
import ExtButtonItem from '@/components/lt/codeGenerator/components/ExtButtonItem'
import ExtButton from '@/components/lt/codeGenerator/components/ExtButton'
import ExtDropDownButton from '@/components/lt/codeGenerator/components/ExtDropDownButton'
import ExtGridForm from '@/components/lt/codeGenerator/components/ExtGridForm'
import ExtFormCol from '@/components/lt/codeGenerator/components/ExtFormCol'
import ExtTag from '@/components/lt/codeGenerator/components/ExtTag'
import Vue from 'vue'
import { Modal } from 'ant-design-vue'
import {getLodop} from '/public/static/clodop/LodopFuncs'
import Big from 'big.js'
import LExcelUpload from '@/components/lt/LExcelUpload'
import LExcelDownload from '@/components/lt/LExcelDownload'
import LEditTableColumn from '@/components/lt/editTable/LEditTableColumn'
import ExtRedirectPage from './ExtRedirectPage'
import ExtLineChar from '@/components/lt/codeGenerator/components/ExtLineChar'
import ExtBarChar from '@/components/lt/codeGenerator/components/ExtBarChar'
import ExtPieChar from '@/components/lt/codeGenerator/components/ExtPieChar'
import { render } from 'nprogress'
import * as echarts from 'echarts'
import ExtMap from '@/components/lt/codeGenerator/components/ExtMap'

export default {
    name:'ExtPage',
    components:{ExtForm,ExtTable,ExtDrawer,ExtRow,ExtTree,ExtQueryForm,ExtModal,ExtButtonItem,
        ExtButton,ExtDropDownButton,ExtGridForm,ExtFormCol,ExtTag,LExcelUpload,LExcelDownload,LEditTableColumn,ExtRedirectPage,ExtLineChar,ExtBarChar,ExtPieChar,ExtMap},
    mixins:[SysMixin],
    data(){
        return{
            Modal,
            Vue,
            defaultSettings,
            pageMethods:null,//页面方法
            pageData:null,//页面数据
            pageMap:new Map(),
            request,
            confirmLoading:false,
            LODOP:null,
            getLodop,
            Big,
            excelUploadTemplateId:'',
            excelDownloadTemplateId:'',
            excelUploadTemplateName:'',
            excelDownloadTemplateName:'',
            excelDownTable:null,
            excelDownShowColumn:true,
            excelUploadShowTemplate:true,
            excelUploadImoprtParameter:{},
        }
      
    },
    created(){
        if(this.$route.meta.pageId){
            this.querySysPage(this.$route.meta.pageId)
        }
       
    },
    watch:{
        $route:{
            handler(newVal,oldVal){
                this.routeChage(newVal,oldVal)
            },
            // 深度观察监听
            deep: true
        }
    },

    methods:{
        //路由改变
        routeChage(newVal,oldVal){},
        //页面生成时
        pageCreate(){},
        
         initPage(sysPage){
            this.initDictCodes = sysPage.pageDict
            this.pageData = sysPage.pageData
            this.initSysPageData(this.pageData.code.data)
            this.initSysPageMethods(this.pageData.code.methods)
            
        },
        querySysPage(pageId){
            request.get('/SysPageController/querySysPageById',{params:{pageId:pageId}}).then((res)=>{
                if (res.success) {
                    // console.log(res)
                    res.result.pageData = JSON.parse(require('js-base64').Base64.decode(res.result.pageData))
                    this.pageMap.set(res.result.keyId,res.result)
                    this.initPage(res.result)
                    this.$nextTick(() => {
                        this.pageCreate()
                    })
                    
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        sysPageRedirect(pageId,pageArg){
            // let pages = this.$store.state.page.pages
            // if(pages.get(pageId)){
            //     pages.get(pageId).$mount('.ant-card-body')
            // }else{
            //     let newPage = Vue.extend(ExtRedirectPage)
            //     let instance = new newPage({ 
            //         propsData: {
            //             pageId: pageId, 
            //             pageArg: pageArg
            //         }
            //     })
            //     pages.set(pageId,instance)
            //     instance.$mount('.ant-card-body');
            // }
           
            let newPage = Vue.extend(ExtRedirectPage)
            let instance = new newPage({ 
                propsData: {
                    pageId: pageId, 
                    pageArg: pageArg
                }
            })
            instance.$mount('.ant-card-body')
         
        },
    },
    render: function(h) {
        if(this.pageData){
            return(
                <a-card bordered={false}>
                    <a-spin spinning={this.confirmLoading}>
                        {this.initSysPageComponents(h,this.pageData.components,this.initDictCodes)}
                    </a-spin>
                    <ExtDrawer ref="ExtDrawer" onClose={this.closeCallback}></ExtDrawer>
                    <ExtModal ref="ExtModal" onClose={this.closeCallback}></ExtModal>
                    <LExcelUpload ref="LExcelUpload" onHandleOk={this.excelUploadCallBack} imoprtParameter={this.excelUploadImoprtParameter} isShowTemplate={this.excelUploadShowTemplate} templateId={this.excelUploadTemplateId} templateName={this.excelUploadTemplateName}></LExcelUpload>
                    <LExcelDownload ref="LExcelDownload" onHandleOk={this.excelDownCallBack} isShowColumn={this.excelDownShowColumn} downTable={this.excelDownTable} templateId={this.excelDownloadTemplateId} templateName={this.excelDownloadTemplateName}></LExcelDownload>
                </a-card>  
            )
        }
    }
}
</script>
